import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon } from 'weaver-mobile';
import { getLabel } from '../../util/common';

@inject('wfGlobalStore','wfLayoutStore')
@withRouter
@observer
export default class DSlidePrompt extends React.Component {
    render(){
        const { variableMap } = this.props;
        const display = variableMap.get("slideprompt_show") === true ? "block" : "none";
        const top = variableMap.get("slideprompt_top") || 0;
        const left = variableMap.get("slideprompt_left") || 0;
        return (
            <div className="wf-detail-slideprompt" style={{display:display, top:top+"px", left:left+"px"}}>
                <div className="wf-detail-slideprompt-icon-area">
                    <Icon type="left-slide" className="wf-detail-slideprompt-icon" />
                </div>
                <div className="wf-detail-slideprompt-text">{getLabel(516477,'左滑显示更多內容')}</div>
            </div>
        )
    }
}